import React, { Component} from 'react';
import {Link} from 'react-router';
import AllOrderList from '../../Component/CommonComponent/AllOrderList'
import Split from '../CommonComponent/Split'
import Empty from '../CommonComponent/Empty'
import Top from '../CommonComponent/Top'
import {PayOrderList,AuditPayOrder} from '../../Action/auth';
import Modal from '../../Component/CommonComponent/Modal'
import {bodyScroll} from '../../Action/rpc';
import $ from "jquery";
import iScroll from "iscroll/build/iscroll-probe";

export default class PayOrder extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.status = '';
        this.state = {
            index:0,
            orderItems:[],
            isCancel:false,
            ordernum:'',
            isReceived:false,
            orderNo:'',
            listPage:1,
            goodsList:[],
            typeValue:'',
            toStatus:''
        };
        this.page = 1;
        this.list=[];
        this.loadingStep = 0;
    }

    async componentWillMount(){
        let type = this.props.location.query.type
        let indexValue = this.props.location.query.index
        this.setState({index:indexValue?indexValue:0,typeValue:type})
        await this.getPayOrderList(0,type,1);
        this.myScroll.refresh();
    }

    componentDidMount() {
        document.querySelector('body').addEventListener('touchmove',bodyScroll, false);

        var pullDownEl = $('#pullDown');
        pullDownEl['class'] = pullDownEl.attr('class');
        pullDownEl.attr('class','').hide();

        var pullUpEl = $('#pullUp');
        pullUpEl['class'] = pullUpEl.attr('class');
        pullUpEl.attr('class','').hide();

        this.myScroll = new iScroll('#content', {
            preventDefault: false,
            probeType: 2,//probeType：1对性能没有影响。在滚动事件被触发时，滚动轴是不是忙着做它的东西。probeType：2总执行滚动，除了势头，反弹过程中的事件。这类似于原生的onscroll事件。probeType：3发出的滚动事件与到的像素精度。注意，滚动被迫requestAnimationFrame（即：useTransition：假）。
            scrollbars: true,//有滚动条
            mouseWheel: true,//允许滑轮滚动
            fadeScrollbars: true,//滚动时显示滚动条，默认影藏，并且是淡出淡入效果
            bounce:true,//边界反弹
            interactiveScrollbars:true,//滚动条可以拖动
            shrinkScrollbars:'scale',// 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.
            click: true ,// 允许点击事件
            keyBindings:true,//允许使用按键控制
            momentum:true// 允许有惯性滑动
        });
        //滚动时
        this.myScroll.on('scroll', this.scroll );
        this.myScroll.on('touchmove', function(e){e.stopPropagation()});
        //滚动完毕
        this.myScroll.on('scrollEnd',this.scrollEnd );
    }

    scroll=()=>{
        var pullDownEl = $('#pullDown');
        var pullDownL = pullDownEl.find('.pullDownLabel');
        var pullUpEl = $('#pullUp');
        var pullUpL = pullUpEl.find('.pullUpLabel');

        if(this.loadingStep == 0 && !pullDownEl.attr('class').match('flip|loading') && !pullUpEl.attr('class').match('flip|loading')){
            if (this.myScroll.y > 5) {
                //下拉刷新效果
                pullDownEl.attr('class',pullUpEl['class'])
                pullDownEl.show();
                this.myScroll.refresh();
                pullDownEl.addClass('flip');
                pullDownL.html('下拉刷新...');
                this.loadingStep = 1;
            }else if (this.myScroll.y < (this.myScroll.maxScrollY - 5) && this.state.orderItems.length>0) {
                if(this.state.listPage!=this.page){
                    //上拉刷新效果
                    pullUpEl.attr('class',pullUpEl['class'])
                    pullUpEl.show();
                    this.myScroll.refresh();
                    pullUpEl.addClass('flip');
                    pullUpL.html('上拉加载...');
                    this.loadingStep = 1;
                }
            }
        }

    }
    scrollEnd=()=>{
        var pullDownEl = $('#pullDown');
        var pullDownL = pullDownEl.find('.pullDownLabel');
        var pullUpEl = $('#pullUp');
        var pullUpL = pullUpEl.find('.pullUpLabel');

        if(this.loadingStep == 1){
            if (pullUpEl.attr('class').match('flip|loading')) {
                pullUpEl.removeClass('flip').addClass('loading');
                pullUpL.html('Loading...');
                this.loadingStep = 2;
                this.pullUpAction();
            }else if(pullDownEl.attr('class').match('flip|loading')){
                pullDownEl.removeClass('flip').addClass('loading');
                pullDownL.html('Loading...');
                this.loadingStep = 2;
                this.pullDownAction();
            }
        }
    }

    pullDownAction() {//下拉事件
        var pullDownEl = $('#pullDown');
        var pullDownL = pullDownEl.find('.pullDownLabel');

        this.page=1;
        this.getPayOrderList(this.state.index,this.state.typeValue,this.page);

        pullDownEl.removeClass('loading');
        pullDownL.html('下拉刷新...');
        pullDownEl['class'] = pullDownEl.attr('class');
        pullDownEl.attr('class','').hide();
        this.myScroll.refresh();
        this.loadingStep = 0;
    }
    pullUpAction() {//上拉事件
        var pullUpEl = $('#pullUp');
        var pullUpL = pullUpEl.find('.pullUpLabel');

        if(this.state.listPage>this.page){
            this.page++;
            this.getPayOrderList(this.state.index,this.state.typeValue,this.page);
        }
        pullUpEl.removeClass('loading');
        pullUpL.html('上拉显示更多...');
        pullUpEl['class'] = pullUpEl.attr('class');
        pullUpEl.attr('class','').hide();
        this.myScroll.refresh();
        this.loadingStep = 0;
    }

    componentWillUnmount() {
        document.querySelector('body').removeEventListener('touchmove',bodyScroll, false);
    }

    async onChange(index){
        if(index != this.state.index){
            this.list=[];
            this.page=1;
            this.setState({index:index})
            await this.setState({isShow:index})
            await this.getPayOrderList(this.state.index,this.state.typeValue,1);
            this.myScroll.refresh();
        }
    }

    //订单列表
    async getPayOrderList(status,type,page){
        await PayOrderList(status,type,page)
            .then(res=>{
                const page = Math.ceil(res.total/res.pageSize);
                this.setState({listPage:page})
                if(page==1){
                    this.list = res.resultList;
                    this.setState({orderItems:this.list})
                }else{
                    this.list = this.list.concat(res.resultList);
                    this.setState({orderItems:this.list})
                }
                this.myScroll.refresh();
            })
            .catch(err=>{
                console.warn('err',err)
            })
    }



    //审批凭证
    async examinePayOrder(){
        await AuditPayOrder(this.state.toStatus,this.state.orderNo)
            .then(res=>{
                this.setState({isDelete:false})
                this.list=[];
                this.page=1;
                this.getPayOrderList(0,this.state.typeValue,1);
            })
            .catch(err=>{
                console.warn('取消订单失败',err)
            })
    }

    render(){
        const {orderItems,isCancel,isReceived} = this.state
        return(
            <div>
                <Top
                    title = {'凭证审核'}
                />
                <div className="pf width100" style={{top:50}}>
                    <AllOrderList
                        index = {this.state.index}
                        onClick = {index=>this.onChange(index)}
                        contents={['待审核','审核通过','审核不通过']}
                    />
                </div>
                <div id="content" className="bkg_color" style={{top:90}}>
                    <div id="scroller" style={{minHeight:window.innerHeight-89}}>
                        <div id="pullDown" className="ub ub-pc c-gra">
                            <div className="pullDownIcon"></div>
                            <div className="pullDownLabel">下拉刷新</div>
                        </div>
                        <ul id="add">
                            <div style={{paddingBottom:20}}>
                                {
                                    orderItems == ''?
                                        <Empty />
                                        :
                                    orderItems&&orderItems.map((item,index)=>{
                                        return(
                                            <div className={this.state.index == 0?'paddinglr border_bottom':'paddinglr'}>
                                                <div className="flex flex-pack-justify plAll bor_dashes flex-align-center">
                                                    <div className="flex f14">
                                                        <div style={{width:50,height:50}}><img src={item.IMAGE} alt=""/></div>
                                                        <div className="ml1">
                                                            <div><span className="color6">姓名:{item.member_name}</span ></div>
                                                            <div><span className="color6">金额:{item.AMOUNT}</span ></div>
                                                            {
                                                                item.NO_TYPE == 1?
                                                                    <div><span className="color6">订单类型:普通订单</span ></div>:
                                                                    item.NO_TYPE == 2?
                                                                        <div><span className="color6">订单类型:代理订单</span ></div>:
                                                                        item.NO_TYPE == 3?
                                                                            <div><span className="color6">奖励类型:统计首批奖励</span ></div>:
                                                                            item.NO_TYPE == 4?
                                                                                <div><span className="color6">奖励类型:补货奖励</span ></div>:
                                                                                item.NO_TYPE == 5?
                                                                                    <div><span className="color6">奖励类型:转介绍奖励</span ></div>:
                                                                                        null
                                                            }
                                                        </div>
                                                    </div>
                                                    <Link to="/imagesDesc" query = {{imgDesc:item.IMAGE}}>
                                                        <div className="colorlv f12 changeBorder border_4 pa_all">查看详情</div>
                                                    </Link>
                                                </div>
                                                {
                                                    item.STATUS == 0?
                                                        <div className="flex flex-pack-justify-end">
                                                            <div
                                                                className="mt5" style={{height: 30}}
                                                                onClick = {()=>this.setState({isDelete:true,orderNo:item.ORDER_NO,desc:'确认审核通过?',toStatus:1})}
                                                            >
                                                                <button className="tr colorfff border_4 pa_all di f14 bgk_lv borderno">审核通过</button>
                                                            </div>
                                                            <div
                                                                className="mt5" style={{height: 30,marginLeft:10}}
                                                                onClick = {()=>this.setState({isDelete:true,orderNo:item.ORDER_NO,desc:'确认不通过审核?',toStatus:2})}
                                                            >
                                                                <button className="tr color9 border_4 pa_all di f14 bkr_Tr border_ccc">审核不通过</button>
                                                            </div>
                                                        </div>
                                                :null}
                                            </div>
                                        )
                                    })
                                }

                            </div>
                        </ul>
                        <div id="pullUp" className="ub ub-pc c-gra">
                            <div className="pullUpIcon"></div>
                            <div className="pullUpLabel">上拉显示更多...</div>
                        </div>
                    </div>
                </div>
                {
                     this.state.isDelete?
                         <Modal
                             title = {this.state.desc}
                             onClick = {()=>this.examinePayOrder()}
                             toHideModal={()=>this.setState({isDelete:false})}
                     />
                     :null
                }

            </div>
        )
    }

}